<script lang="ts" setup>
  import { buildStyles } from "../utils";

  interface AvatarProps {
    width?: number;
    height?: number;
    bgColor?: string;
  }

  const props = withDefaults(defineProps<AvatarProps>(), {
    width: 50,
    height: 50,
    bgColor: "#f5f5f5",
  });

  const styles = buildStyles(() => ({
    width: `${props.width}px`,
    height: `${props.height}px`,
    backgroundColor: props.bgColor,
  }));
</script>

<template>
  <div class="umrp-avatar" :style="styles">
    <iconpark-icon name="user"></iconpark-icon>
  </div>
</template>

<style lang="scss" scoped>
  .umrp-avatar {
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;

    > iconpark-icon {
      transform: scale(0.6);
    }
  }
</style>
